<!--
 * @Author: dengyl
 * @Date: 2022-01-11 19:51:54
 * @LastEditTime: 2022-08-19 17:19:51
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @Description: 新闻展示组件
 * @FilePath: \code\ctp-static-portal-front\src\components\news\index.vue
-->
<template>
  <div
    class="news-panel"
    :class="{ isCard: componentName === 'Card' && !cardType }"
    :style="height"
  >
    <component
      v-if="dataList && dataList.length"
      :is="componentName"
      :list="dataList"
      :categoryList="categoryList"
      :options="sectionData.options"
      :cardType="cardType"
      :direction="sectionData.data.resolveFunction === 'pictureRotationLeftTemplete'"
      :contentWidth="contentWidth"
      :sectionData="sectionData"
      :sectionStyle="sectionStyle"
    />
  </div>
</template>

<script>
  import List from './components/list.vue';
  import Card from './components/card.vue';
  import Slideshow from './components/slideshow.vue';
  import PicList from './components/pic-list.vue';
  import Effuse from './components/effuse.vue';
  import Abstract from './components/abstract.vue';
  import Roll from './components/roll.vue';
  import SectionCategory from './components/section-category.vue';
  import PicTitle from './components/pic-title';
  import { checkPanelAndSet } from '@/components/helper';
  import { methods } from '@/utils';
  export default {
    name: 'News',
    components: {
      PicTitle,
      List,
      Card,
      Slideshow,
      PicList,
      Effuse,
      Abstract,
      Roll,
      SectionCategory
    },
    props: {
      dataList: {
        type: Array
      },
      sectionData: { type: Object, default: () => ({}) },
      contentWidth: {
        type: Number,
        default: 0
      },
      sectionStyle: {
        type: Object,
        default: () => ({})
      },
      categoryList: {
        type: Array
      }
    },
    data() {
      return {
        cardType: '',
        height: `height:${methods.getContentHeight(this.sectionData.options)}px`
      };
    },
    computed: {
      componentName() {
        switch (this.sectionData.data.resolveFunction) {
          case 'pictureCardTemplete':
          case 'morePictureTemplete':
            return 'Card';
          case 'pictureRotationLeftTemplete':
          case 'pictureRotationBottomTemplete':
            return 'Slideshow';
          case 'multiPictureTemplete':
            return 'Effuse';
          case 'pictureTitleAndBriefTemplete':
            return 'Abstract';
          case 'multiPictureScrollingTemplate':
            return 'Roll';
          case 'oneImageAndListTemplete':
            return 'PicList';
          case 'categoryPictureTitleAndBriefTemplete':
            return 'SectionCategory';
          case 'pictureTitleSimpleTemplete':
            return 'PicTitle';
          default:
            return 'List';
        }
      }
    },
    created() {
      console.log('this.sectionData.data.resolveFunction :>> ', this.sectionData.data.resolveFunction);
      this.cardType = this.sectionData.data.resolveFunction === 'morePictureTemplete' ? 'two' : '';
      // console.log(
      //   this.sectionData.options.columnsName,
      //   this.sectionData,
      //   this.sectionData.data.resolveFunction
      // );
      checkPanelAndSet(this.sectionData.data.resolveFunction, (height) => {
        this.height = height;
      });
    }
  };
</script>
<style lang="scss" scoped>
  .news-panel {
    /* width: 100%; */
    height: 100%;
    padding: 10px 15px;

    &.isCard {
      padding: 10px 0;
    }
  }
</style>
